import React, { Component, Suspense, lazy } from 'react'

import { Route, Switch } from 'react-router-dom'


const Home = lazy(() => import( '@/views/Home'))
const Detail = lazy(() => import('@/views/Detail'))
const Login = lazy(() => import('@/views/Login'))
const Search = lazy(() => import('@/views/Search'))

class Routes extends Component {
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Route path="/detail/:id" component={Detail} />
          <Route path="/login" component={Login} />
          <Route path="/search" component={Search} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    )
  }
}

export default Routes
